<template>

	<view class="page">
		<u-navbar :fixed="false" title="我的团队" placeholder="true" :autoBack="true"></u-navbar>

		<u-search v-model="keyword" placeholder="搜索" @search="onSearch" @custom="onSearch" />




		<z-paging ref="paging" v-model="listData" @query="queryList" usePageScroll>
			<view class="user-list">
				<view v-for="(user, index) in listData" :key="index">
					<view class="user-item" @click="toUrYgbj(user)">
						<image class="avatar" :src="user.avatar" mode="aspectFill"></image>
						<view class="user-info">
							<view class="name">{{ user.name }}</view>
							<view class="status row_a_c " :class="{ active: user.active }">
								<image v-if=" user.activate_status" class="jhtb" src="/static/images/jhtb.png"></image>
								<image v-else class="jhtb" src="/static/images/jhtb2.png"></image>
								<view v-if="user.activate_status==1" style="color: #5DD9CC;">已激活</view>
								<view v-else>未激活</view>
							</view>
						</view>
						<view class="role">{{ user.position.name }}</view>
					</view>
				</view>
			</view>
		</z-paging>

	</view>

</template>


<script>
	import team_api from '@/api/team.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				// this.getTeamListFuc(); //获取团队列表
			}
		},
		data() {
			return {
				keyword: null,
				access_token: null,
				listData: null,
			};
		},


		methods: {
			toUrYgbj(info) {
				var per = JSON.stringify(info);
				uni.navigateTo({
					url: '/pages/my/settings?info=' + per
				});
			},
			onSearch() {
				// this.getTeamListFuc();
				this.$refs.paging.reload();
			},


			async queryList(pageNo, pageSize) {

				var per = {
					no_page: pageNo,
					page_size: pageSize,
				}

				if (this.keyword) {
					per.keyword = this.keyword
				}

				const res = await team_api.getTeamList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}

			},




			//获取团队列表
			// async getTeamListFuc() {
			// 	var per = {
			// 		no_page: 1,
			// 		page_size: 10
			// 	}
			// 	if (this.keyword) {
			// 		per.keyword = this.keyword
			// 	}
			// 	const res = await team_api.getTeamList(per);
			// 	if (res.code == 1) {
			// 		this.listData = res.data.list;
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },


		}
	};
</script>


<style scoped lang="scss">
	.page {
		padding: 20rpx;
	}

	.user-list {
		margin-top: 20rpx;
	}

	.user-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-info {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.status {
		font-size: 28rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.status.active {
		color: #1FA194;
	}

	.role {
		padding: 10rpx 20rpx;
		background-color: #1FA194;
		color: #fff;
		font-size: 28rpx;
		border-radius: 20rpx;
	}

	.jhtb {
		width: 32rpx;
		height: 32rpx;
		margin-top: 5rpx;
	}
</style>